<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>场景管理 - 御物联</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        :root{--primary:#409EFF;--stage-bg:#EDE3D3;--bg:#F5F7FA;--text:#303133;--subtext:#909399;--card:#FFFFFF;--border:#EBEEF5;--ok:#67C23A;--warn:#E6A23C;--danger:#F56C6C}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--stage-bg);color:var(--text)}
        .page{min-height:100vh;max-width:480px;margin:0 auto;background:var(--bg);padding-bottom:12px}
        /* 页头样式 */
        .header-box{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--border);box-shadow:0 -2px 8px rgba(0,0,0,.04);padding:12px;display:flex;justify-content:space-between;align-items:center;margin:0;border-radius:0}
        .back-btn{padding:0 12px;height:32px;border-radius:16px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;gap:6px;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.03);cursor:pointer;font-size:14px;transition:all 0.2s;text-decoration:none}
        .back-btn:hover{background:var(--bg);border-color:var(--primary);color:var(--primary)}
        .back-btn::before{content:'←';font-size:16px;line-height:1}
        .user{padding:0 10px;height:32px;border-radius:16px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;gap:8px;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.03)}
        .user-avatar{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
        
        .filters{background:var(--card);border:1px solid var(--border);border-radius:12px;margin:12px;padding:16px;box-shadow:0 2px 6px rgba(0,0,0,.03)}
        .filter-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
        .filter-row:last-child{margin-bottom:0}
        .filter-select{flex:1;min-width:120px;height:36px;border:1px solid var(--border);border-radius:6px;background:var(--card);padding:0 12px;color:var(--text);font-size:14px}
        .search-input{flex:1;min-width:120px;height:36px;border:1px solid var(--border);border-radius:6px;background:var(--card);padding:0 12px;color:var(--text);font-size:14px}
        .btn-primary{height:36px;padding:0 16px;border-radius:6px;border:none;background:var(--primary);color:#fff;font-size:14px;white-space:nowrap;flex-shrink:0}
        .btn-plain{height:36px;padding:0 16px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:14px;white-space:nowrap;flex-shrink:0}
        .button-row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;width:100%;flex-wrap:wrap}
        
        /* 场景操作样式 */
        .scene-actions{ margin:0 12px 16px; text-align:right; }
        .scene-actions .btn{ width:auto; padding:0 16px; flex:none; }
        .scene-list{background:var(--card);border:1px solid var(--border);border-radius:12px;margin:0 12px 12px;overflow:hidden}
        .scene-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); }
        .scene-row:last-child{ border-bottom:none; }
        .scene-info{ flex:1; }
        .scene-name{ font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
        .scene-desc{font-size:12px;color:var(--subtext);margin-bottom:4px;line-height:1.4}
        .scene-time{ font-size:12px; color:var(--subtext); }
        .scene-row .scene-actions{ display:flex; gap:8px; margin:0; }
        .scene-btn{ height:32px; padding:0 12px; border-radius:6px; border:1px solid var(--border); background:#fff; color:var(--text); font-size:12px; cursor:pointer; transition:all 0.3s ease; }
        .scene-btn:hover{ background:var(--bg); }
        .scene-btn:not(.scene-edit-btn):not(.scene-delete-btn){ background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
        .scene-btn:not(.scene-edit-btn):not(.scene-delete-btn):hover{ background:#66b1ff; }
        .scene-edit-btn{ color:var(--primary); border-color:var(--primary); }
        .scene-edit-btn:hover{ background:rgba(64,158,255,0.1); }
        .scene-delete-btn{ color:var(--danger); border-color:var(--danger); }
        .scene-delete-btn:hover{ background:rgba(245,108,108,0.1); }
        
        /* 抽屉复用 */
        .drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:999}
        .drawer-mask.open{opacity:1;pointer-events:auto}
        .drawer{position:fixed;top:0;right:0;height:100vh;width:86vw;max-width:420px;background:var(--card);border-left:1px solid var(--border);box-shadow:-12px 0 24px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .25s ease;z-index:1000;display:flex;flex-direction:column}
        .drawer.open{transform:translateX(0)}
        .drawer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600}
        .drawer-body{padding:0 14px 14px;color:var(--subtext);font-size:14px;overflow:auto}
        .drawer-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);color:var(--text)}
        .drawer-row:last-child{border-bottom:none}
        .drawer-foot{display:flex;gap:10px;padding:12px;background:var(--bg);border-top:1px solid var(--border)}
        .btn{height:40px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text);flex:1}
        .btn-danger{background:#F56C6C;color:#fff;border:none}
        
        /* 修改密码模态框样式 */
        .password-modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:2000; }
        .password-modal.open{ display:flex; }
        .password-dialog{ background:var(--card); border-radius:12px; padding:20px; width:90%; max-width:400px; box-shadow:0 8px 32px rgba(0,0,0,.2); }
        .password-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
        .password-title{ font-size:18px; font-weight:600; color:var(--text); }
        .password-close{ background:none; border:none; font-size:24px; color:var(--subtext); cursor:pointer; }
        .password-form{ display:block; }
        .form-group{ margin-bottom:16px; }
        .form-label{ display:block; margin-bottom:6px; color:var(--text); font-size:14px; font-weight:500; }
        .form-input{ width:100%; height:40px; border:1px solid var(--border); border-radius:8px; padding:0 12px; font-size:14px; color:var(--text); background:var(--card); }
        .form-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(64,158,255,.2); }
        .password-actions{ display:flex; gap:12px; margin-top:20px; }
        .btn-submit{ flex:1; height:40px; background:var(--primary); color:#fff; border:none; border-radius:8px; font-size:14px; cursor:pointer; }
        .btn-cancel{ flex:1; height:40px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; font-size:14px; cursor:pointer; }
        .error-message{ color:var(--danger); font-size:12px; margin-top:4px; }
        
    </style>
</head>
<body>
    <div class="page">
        <!-- 白色吸顶框包含用户信息 -->
        <div class="header-box">
            <a href="system-overview.html" class="back-btn">返回首页</a>
            <button class="user" id="userBtn" type="button" title="查看个人信息">
                <span class="user-avatar" id="userAvatar">U</span>
                <span id="userName">用户</span>
            </button>
        </div>

        <!-- 场景筛选区 -->
        <div class="filters">
            <div class="filter-row">
                <select class="filter-select" id="sceneSiteSelect">
                    <option value="">选择网点</option>
                    <option value="iot-test" selected>物联网内部测试系统</option>
                    <option value="smart-park">智慧园区示范点</option>
                    <option value="water-pilot">城市水务试点</option>
                </select>
            </div>
            <div class="filter-row">
                <input class="search-input" placeholder="请输入场景名称" id="sceneNameInput"/>
            </div>
            <div class="button-row">
                <button class="btn-primary" id="sceneSearchBtn">筛选</button>
                <button class="btn-plain" id="sceneResetBtn">重置</button>
            </div>
        </div>

        <!-- 场景操作区 -->
        <div class="scene-actions">
            <button class="btn btn-primary" id="addSceneBtn">+ 新增场景</button>
        </div>

        <!-- 场景列表 -->
        <div class="scene-list">
            <div class="scene-row">
                <div class="scene-info">
                    <div class="scene-name">回家模式</div>
                    <div class="scene-desc">自动开启照明、调节空调温度、播放欢迎音乐，营造温馨的回家氛围</div>
                    <div class="scene-time">最近执行：2024-01-15 18:30</div>
                </div>
                <div class="scene-actions">
                    <button class="scene-btn">执行</button>
                    <button class="scene-btn scene-edit-btn">编辑</button>
                    <button class="scene-btn scene-delete-btn">删除</button>
                </div>
            </div>
            <div class="scene-row">
                <div class="scene-info">
                    <div class="scene-name">离家模式</div>
                    <div class="scene-desc">关闭所有照明设备、调节空调至节能模式、启动安防系统，确保家庭安全</div>
                    <div class="scene-time">最近执行：2024-01-15 08:15</div>
                </div>
                <div class="scene-actions">
                    <button class="scene-btn">执行</button>
                    <button class="scene-btn scene-edit-btn">编辑</button>
                    <button class="scene-btn scene-delete-btn">删除</button>
                </div>
            </div>
            <div class="scene-row">
                <div class="scene-info">
                    <div class="scene-name">睡眠模式</div>
                    <div class="scene-desc">调暗照明、降低空调温度、关闭娱乐设备，营造舒适的睡眠环境</div>
                    <div class="scene-time">最近执行：2024-01-14 22:00</div>
                </div>
                <div class="scene-actions">
                    <button class="scene-btn">执行</button>
                    <button class="scene-btn scene-edit-btn">编辑</button>
                    <button class="scene-btn scene-delete-btn">删除</button>
                </div>
            </div>
            <div class="scene-row">
                <div class="scene-info">
                    <div class="scene-name">节能模式</div>
                    <div class="scene-desc">优化设备运行参数、降低能耗、延长设备寿命，实现绿色环保的智能控制</div>
                    <div class="scene-time">最近执行：2024-01-13 20:45</div>
                </div>
                <div class="scene-actions">
                    <button class="scene-btn">执行</button>
                    <button class="scene-btn scene-edit-btn">编辑</button>
                    <button class="scene-btn scene-delete-btn">删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 抽屉与遮罩（复用系统页） -->
    <div class="drawer-mask" id="drawerMask"></div>
    <aside class="drawer" id="userDrawer" aria-label="个人信息">
        <div class="drawer-header"><span>个人信息</span></div>
        <div class="drawer-body">
            <div class="drawer-row" style="padding:20px 0 12px; text-align:center;">
                <button id="userInfoBtn" class="btn btn-primary" style="width:100%; height:48px; font-size:16px;">查看个人信息</button>
            </div>
            <div class="drawer-row" style="border-bottom:none; padding:12px 0 20px; text-align:center;">
                <button id="controlPanelBtn" class="btn" style="width:100%; height:48px; font-size:16px; background:var(--ok); color:#fff; border-color:var(--ok);">操作面板展示</button>
            </div>
        </div>
        <div class="drawer-foot">
            <button id="changePasswordBtn" class="btn" style="flex:1; background:var(--primary); color:#fff; border:none;">修改密码</button>
            <button id="logoutBtn" class="btn btn-danger">退出登录</button>
            <button id="closePanel" class="btn">关闭</button>
        </div>
    </aside>

    <!-- 修改密码模态框 -->
    <div class="password-modal" id="passwordModal">
        <div class="password-dialog">
            <div class="password-header">
                <span class="password-title">修改密码</span>
                <button class="password-close" id="passwordClose">&times;</button>
            </div>
            <form class="password-form" id="passwordForm">
                <div class="form-group">
                    <label class="form-label" for="currentPassword">当前密码</label>
                    <input type="password" class="form-input" id="currentPassword" placeholder="请输入当前密码" required>
                    <div class="error-message" id="currentPasswordError"></div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="newPassword">新密码</label>
                    <input type="password" class="form-input" id="newPassword" placeholder="请输入新密码" required>
                    <div class="error-message" id="newPasswordError"></div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="confirmPassword">确认新密码</label>
                    <input type="password" class="form-input" id="confirmPassword" placeholder="请再次输入新密码" required>
                    <div class="error-message" id="confirmPasswordError"></div>
                </div>
                <div class="password-actions">
                    <button type="button" class="btn-cancel" id="passwordCancel">取消</button>
                    <button type="submit" class="btn-submit">确认修改</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 用户显示初始化
        (function(){
            const u = JSON.parse(localStorage.getItem('currentUser')||'{}');
            document.getElementById('userName').textContent = u.name || '用户';
            document.getElementById('userAvatar').textContent = (u.name||'U').slice(0,1);
        })();
        
        // 抽屉交互
        const drawer=document.getElementById('userDrawer');
        const mask=document.getElementById('drawerMask');
        function openDrawer(){drawer.classList.add('open');mask.classList.add('open')}
        function closeDrawer(){drawer.classList.remove('open');mask.classList.remove('open')}
        document.getElementById('userBtn').addEventListener('click',openDrawer);
        document.getElementById('closePanel').addEventListener('click',closeDrawer);
        mask.addEventListener('click',closeDrawer);
        document.getElementById('userInfoBtn').addEventListener('click',()=>{closeDrawer();location.href='user-info.html'});
        document.getElementById('controlPanelBtn').addEventListener('click',()=>{closeDrawer();location.href='control-panel-demo.html'});
        document.getElementById('logoutBtn').addEventListener('click',()=>{localStorage.removeItem('currentUser');location.href='mobile-login-demo.html'})
        document.addEventListener('keydown',e=>{if(e.key==='Escape')closeDrawer()});
        
        // 场景筛选功能
        document.getElementById('sceneSearchBtn').addEventListener('click', function() {
            const site = document.getElementById('sceneSiteSelect').value;
            const name = document.getElementById('sceneNameInput').value;
            
            console.log('场景筛选条件:', {site, name});
            alert(`场景筛选条件：\n网点：${site || '全部'}\n场景名称：${name || '全部'}`);
        });
        
        document.getElementById('sceneResetBtn').addEventListener('click', function() {
            document.getElementById('sceneSiteSelect').value = 'iot-test';
            document.getElementById('sceneNameInput').value = '';
        });
        
        // 场景操作功能
        function initSceneButtons() {
            // 执行按钮
            document.querySelectorAll('.scene-btn:not(.scene-edit-btn):not(.scene-delete-btn)').forEach(btn => {
                btn.addEventListener('click', function() {
                    const sceneName = this.closest('.scene-row').querySelector('.scene-name').textContent;
                    alert(`正在执行场景：${sceneName}`);
                });
            });
            
            // 编辑按钮
            document.querySelectorAll('.scene-edit-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const sceneName = this.closest('.scene-row').querySelector('.scene-name').textContent;
                    const project = document.getElementById('sceneSiteSelect').selectedOptions[0].text;
                    location.href = `scene-detail.html?mode=edit&sceneName=${encodeURIComponent(sceneName)}&project=${encodeURIComponent(project)}`;
                });
            });
            
            // 删除按钮
            document.querySelectorAll('.scene-delete-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const sceneName = this.closest('.scene-row').querySelector('.scene-name').textContent;
                    if (confirm(`确定要删除场景"${sceneName}"吗？`)) {
                        this.closest('.scene-row').remove();
                        alert(`场景"${sceneName}"已删除`);
                    }
                });
            });
        }
        
        // 新增场景功能
        document.getElementById('addSceneBtn').addEventListener('click', function() {
            const project = document.getElementById('sceneSiteSelect').selectedOptions[0].text;
            location.href = `scene-detail.html?mode=add&project=${encodeURIComponent(project)}`;
        });
        
        // 初始化场景按钮
        initSceneButtons();
        
        // 修改密码功能
        const passwordModal = document.getElementById('passwordModal');
        const passwordForm = document.getElementById('passwordForm');
        
        function openPasswordModal() {
            passwordModal.classList.add('open');
            // 关闭个人信息抽屉
            closeDrawer();
        }
        
        function closePasswordModal() {
            passwordModal.classList.remove('open');
            // 清空表单和错误信息
            passwordForm.reset();
            clearPasswordErrors();
        }
        
        function clearPasswordErrors() {
            document.getElementById('currentPasswordError').textContent = '';
            document.getElementById('newPasswordError').textContent = '';
            document.getElementById('confirmPasswordError').textContent = '';
        }
        
        function showPasswordError(fieldId, message) {
            document.getElementById(fieldId + 'Error').textContent = message;
        }
        
        function validatePassword() {
            const currentPassword = document.getElementById('currentPassword').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            clearPasswordErrors();
            let isValid = true;
            
            // 验证当前密码（这里简化处理，实际应该与服务器验证）
            if (!currentPassword) {
                showPasswordError('currentPassword', '请输入当前密码');
                isValid = false;
            }
            
            // 验证新密码
            if (!newPassword) {
                showPasswordError('newPassword', '请输入新密码');
                isValid = false;
            } else if (newPassword.length < 6) {
                showPasswordError('newPassword', '密码长度至少6位');
                isValid = false;
            }
            
            // 验证确认密码
            if (!confirmPassword) {
                showPasswordError('confirmPassword', '请确认新密码');
                isValid = false;
            } else if (newPassword !== confirmPassword) {
                showPasswordError('confirmPassword', '两次输入的密码不一致');
                isValid = false;
            }
            
            return isValid;
        }
        
        // 事件监听
        document.getElementById('changePasswordBtn').addEventListener('click', openPasswordModal);
        document.getElementById('passwordClose').addEventListener('click', closePasswordModal);
        document.getElementById('passwordCancel').addEventListener('click', closePasswordModal);
        
        // 点击模态框背景关闭
        passwordModal.addEventListener('click', (e) => {
            if (e.target === passwordModal) {
                closePasswordModal();
            }
        });
        
        // 表单提交
        passwordForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            if (validatePassword()) {
                // 这里应该调用API修改密码
                alert('密码修改成功！');
                closePasswordModal();
            }
        });
        
        // Esc键关闭密码模态框
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && passwordModal.classList.contains('open')) {
                closePasswordModal();
            }
        });
    </script>
</body>
</html>

